$postSignature: (
  primary: var(--border-post-signature),
  background: var(--bg-post-signature),
  borderRadius: 2px,
);

$toolMenu: (
  background: var(--bg-md-summary),
  color: #fff,
);

$signature: (
  padding: 1rem 14px,
  fontSize: 1em,
);

$imagebox: (
  background: var(--bg-tool-item),
);

$player: (
  bodyBackground: var(--bg-tags),
);

$postMessage: (
  categoriesBackground: #f13a3a,
  tagsBackground: #22a6b3 #0097e6 #fbc531 #10ac84,
  colorTags: var(--color-basic-700),
  colorMessage: var(--color-basic-600),
  colorCategories: #fff,
);

$emoji: (
  textEmojiColor: var(--color-basic-700),
  bg: var(--bg-emoji),
  borderColor: var(--border-form),
  hoverBg: var(--bg-tags),
  hoverBorderColor: var(--border-post-signature),
);

@import '/node_modules/@acnb/plugins/src/plugins/postMessage/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/codeHighlight/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/codeLinenumbers/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/commentsAvatars/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/signature/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/emoji/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/imagePreview/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/notice/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/license/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/tools/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/darkMode/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/clickEffects/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/musicPlayer/index.scss';
// @import '/node_modules/@acnb/plugins/src/plugins/codeCopy/index.scss'; // 自定义插件样式
@import '/node_modules/@acnb/plugins/src/plugins/codeLang/index.scss';
@import '/node_modules/@acnb/plugins/src/plugins/codeTrafficLight/index.scss';

// toolMenu

.custom-toolbar {
  z-index: 9;
}

.rocket-rotate {
  position: relative;
  top: 2px;
  transform: rotate(-45deg);
}

// comments avatars

.custom-comment-avatar {
  position: relative;
  img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
  }
}

.custom-comments-author {
  .custom-comment-avatar::after {
    position: absolute;
    bottom: 11px;
    right: 5px;
    content: '\f058';
    color: #4ac7ff;
    background-color: #fff;
    line-height: 1em;
    border-radius: 50%;
    margin-right: 0;
    font-size: 80%;
  }
}

// postMessage

.custom-categories a,
.custom-tags a {
  box-shadow: none;
}

// image box

.medium-zoom-image--opened {
  z-index: 41;
}

// dragmenu

.toolbar-item {
  box-shadow: 0 2px 6px 0 rgb(0 0 0 / 20%);
}

.custom-drag-menu {
  z-index: 3;
}

.medium-zoom-overlay {
  z-index: 2;
}

// click

#click-effects {
  z-index: 6;
}

// player

body .aplayer.aplayer-fixed .aplayer-lrc {
  bottom: 30px;
}

// catalog

#catalog {
  padding: 25px;
  font-size: 14px;
  overflow-x: hidden;
  word-wrap: nowrap;
  text-overflow: ellipsis;

  .catalog-title {
    display: flex;
    align-items: center;
    position: sticky;
    top: 0;
    font-family: DM Sans, sans-serif;
    color: var(--color-basic-700);
    font-size: 15px;
    margin-bottom: 20px;
  }

  ul {
    border-left: 1px solid var(--border-catalog);
    li {
      color: var(--color-basic-800);
      display: flex;
      align-items: center;
      line-height: 1.8;
      &::before {
        position: relative;
        right: 5px;
        display: block;
        width: 7px;
        height: 7px;
        content: '';
        border-radius: 50%;
        border: 1px solid var(--color-primary);
        background-color: var(--bg-sidebar);
        margin-right: 4px;
        transition: transform 0.2s;
      }
      &:hover {
        color: var(--color-basic-900);
      }
      a {
        display: inline-block;
        width: 100%;
        .icon {
          width: 1.2em;
          height: 1.8em;
        }
      }
    }

    .h1-list {
      font-weight: 700;
      font-size: 16px;
    }
    .h2-list {
      font-size: 14px;
    }
    .h3-list,
    .h4-list,
    .h5-list,
    .h6-list {
      font-size: 12px;
    }
    .h1-list ~ .h2-list {
      margin-left: 1em;
      font-size: 14px;
    }
    .h2-list ~ .h3-list {
      margin-left: 2em;
    }
    .h3-list ~ .h4-list {
      margin-left: 3em;
    }
    .h4-list ~ .h5-list {
      margin-left: 4em;
    }
    .h5-list ~ .h6-list {
      margin-left: 5em;
    }

    .catalog-active {
      color: var(--color-primary);
      transition: all 0.3s;
      &::before {
        transform: scale(1) translateX(0);
        background-color: var(--color-primary);
      }
    }
  }
}

// copy code
.cnblogs_code,
.cnblogs_Highlighter {
  position: relative;
  .copy-btns {
    z-index: 1;
  }
}

.copy-btns {
  position: absolute;
  right: 8px;
  top: 8px;
  width: 86px;
  font-size: 12px;
  cursor: pointer;
  padding: 2px 4px 1px 8px;
  border-radius: 4px;
  color: var(--color-basic-600);
  &:before {
    content: '\f0c5';
    margin-right: 8px;
    font-weight: 500;
  }
  &:hover {
    background: var(--color-basic-200);
    transition: background 0.2s;
  }
}

// code language
.awes-lang {
  position: absolute;
  right: 98px;
  top: 13px;
  height: 14px;
  line-height: 1.2;
  padding-right: 14px;
  margin-right: 4px;
  border-right: 1px solid var(--color-basic-300);
  font-size: 12px;
  text-transform: uppercase;
  color: var(--color-basic-500);
}

.blog_comment_body {
  .awes-linenumber {
    display: none;
  }
}

@media screen and (max-width: 1024px) {
  .blog_comment_body {
    .awes-lang {
      display: none;
    }
  }
}
